<script setup>
import * as echarts from 'echarts';
import { message } from "ant-design-vue";

//定时器的配置 定时器的执行为每秒执行60次，和浏览区的刷新频率一致
const numberConfig = reactive( {
  min : 0,//最小值
  max : 10000,//最大值
  step : 100,//步数
} );
const cycle = ref( 0 );

/**
 * 定时器
 * @param numberConfig 配置对象
 */
const cycleTimer = ( numberConfig ) => {
  cycle.value = numberConfig.min;
  let animationFrameId;
  const animateCycle = () => {
    if ( numberConfig.max < cycle.value + numberConfig.step ) {
      cycle.value = numberConfig.max;
      cancelAnimationFrame( animationFrameId );
    } else {
      cycle.value += numberConfig.step;
      requestAnimationFrame( animateCycle );
    }
  };
  
  animationFrameId = requestAnimationFrame( animateCycle );
};

const chartDom = ref( null );
const pieChartDom = ref( null );
const barChartDom = ref( null );
// 折线图配置
const lineChartOptions = {
  title : {
    text : '折线图'
  },
  tooltip : {},
  xAxis : {
    data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
  },
  yAxis : {},
  series : [ {
    name : '访问量',
    type : 'line',
    data : [ 820, 932, 901, 934, 1290, 1330, 1320 ]
  } ]
};
//柱状图配置
const barChartOptions = {
  title : {
    text : '柱状图'
  },
  tooltip : {},
  xAxis : {
    type : 'category',
    data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
  },
  yAxis : {
    type : 'value'
  },
  series : [
    {
      data : [ 120, 200, 150, 80, 70, 110, 130 ],
      type : 'bar'
    }
  ]
};
// 饼状图配置
const pieChartOptions = {
  title : {
    text : 'Referer of a Website',
    subtext : 'Fake Data',
    left : 'center'
  },
  tooltip : {
    trigger : 'item'
  },
  legend : {
    orient : 'vertical',
    left : 'left'
  },
  series : [
    {
      name : 'Access From',
      type : 'pie',
      radius : '50%',
      data : [
        { value : 1048, name : 'Search Engine' },
        { value : 735, name : 'Direct' },
        { value : 580, name : 'Email' },
        { value : 484, name : 'Union Ads' },
        { value : 300, name : 'Video Ads' }
      ],
      emphasis : {
        itemStyle : {
          shadowBlur : 10,
          shadowOffsetX : 0,
          shadowColor : 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

const flexValue = ref( 'horizontal' );
const baseStyle = {
  width : '33%',
}
const mobileStyle = {
  width : '100%',
}


// 复制文本到剪贴板
const copyToClipboard = async ( text ) => {
  try {
    await navigator.clipboard.writeText( text );
    message.success( '复制成功' )
  } catch ( err ) {
    console.error( 'Failed to copy text: ', err );
    message.error( '复制失败' )
  }
}

//获取当年的第几天
const getDayOfYear = ( date ) => {
  if ( date ) {
    const dateObj = new Date( date );
    const startOfYear = new Date( dateObj.getFullYear(), 0, 0 );
    const diff = dateObj - startOfYear;
    const oneDay = 1000 * 60 * 60 * 24;
    const dayOfYear = Math.floor( diff / oneDay );
    message.success( '今天是' + dateObj.getFullYear() + '年的第' + dayOfYear + '天' )
  }
}

const selectedDate = ref( undefined );

// 初始化图表
onMounted( async () => {
  //获取屏幕的宽度
  const screenWidth = window.innerWidth;
  if ( screenWidth < 768 ) {
    flexValue.value = 'vertical';
  } else {
    flexValue.value = 'horizontal';
  }
  await nextTick( () => {
    echarts.init( chartDom.value ).setOption( lineChartOptions );
    echarts.init( pieChartDom.value ).setOption( pieChartOptions );
    echarts.init( barChartDom.value ).setOption( barChartOptions );
  } ); // 确保 DOM 更新完成
  
  cycleTimer( numberConfig );
} );

</script>

<template>
  <a-page-header>
    <template #title>
      <a-space>
        <a-statistic title="数据跳动" :value="cycle"/>
      </a-space>
    </template>
  </a-page-header>
  <a-flex :vertical="flexValue === 'vertical'">
    <div :style="{width: flexValue === 'vertical' ? mobileStyle.width : baseStyle.width,height:'400px'}" ref="chartDom"></div>
    <div :style="{width: flexValue === 'vertical' ? mobileStyle.width : baseStyle.width,height:'400px'}" ref="pieChartDom"></div>
    <div :style="{width: flexValue === 'vertical' ? mobileStyle.width : baseStyle.width,height:'400px'}" ref="barChartDom"></div>
  </a-flex>
  
  <a-divider/>
  
  <div>
    <h1>测试区域</h1>
  </div>
  <a-space :size="8">
    <a-button @click="copyToClipboard('hello word')" class="btn">复制文本</a-button>
    <a-date-picker type="date" v-model:value="selectedDate" placeholder="选择日期" @change="getDayOfYear(selectedDate)"/>
  </a-space>

</template>

<style scoped>
.btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: scale(0.9);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

h1 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

</style>
